import {type NextPage} from "next";
import Head from "next/head";
import Link from "next/link";
import {useState} from "react";

const worker1Path = "/worker/worker1.js";
const worker2Path = "/worker/worker2.js";
const worker3Path = "/worker/worker3.js";
const worker4Path = "/worker/worker4.js";

const Worker: NextPage = () => {
    const [worker1, setWorker1] = useState<string>('')

    const testWorker1 = () => {
        // 主线程
        const worker = new window.Worker(worker1Path);
        worker.postMessage([10, 24])
        worker.onmessage = function (e: MessageEvent<string>) {
            console.log(e.data)
            setWorker1(e.data)
        }

    }

    const [worker2, setWorker2] = useState<string>('')
    const testWorker2 = () => {
        // 主线程
        const worker = new window.Worker(worker2Path);
        worker.postMessage("testWorker2")
        worker.onmessage = function (e: MessageEvent<string>) {
            console.log(e.data)
            setWorker2(e.data)
        }

    }

    const [sharedWorker, setSharedWorker] = useState<string>('')
    const testSharedWorker = () => {
        // 主线程
        const worker = new window.SharedWorker(worker3Path);
        worker.port.postMessage("testSharedWorker")
        worker.port.onmessage = function (e: MessageEvent<string>) {
            console.log(e.data)
            setSharedWorker(e.data)
        }

    }

    const number = 100
    const [noWorkerMulti, setNoWorkerMulti] = useState<number>()
    const testNoWorkerMulti = () => {
        let result = 1
        for (let i = 1; i < number; i++) {
            result = result * i
        }
        setNoWorkerMulti(result)
    }

    const [workerMulti, setWorkerMulti] = useState<number>()
    const tesWorkerMulti = () => {
        // 主线程
        const worker = new window.Worker(worker4Path);
        worker.postMessage(number)
        worker.onmessage = function (e: MessageEvent<number>) {
            console.log(e.data)
            setWorkerMulti(e.data)
        }
        worker.onerror = function (e) {
            console.error('tesWorkerMulti err', e)
        }
    }
    return (
        <>
            <Head>
                <title>test web worker</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <main
                className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#160b29] to-[#215956]">
                <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
                    <h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
                        Test web<span className="text-[hsl(280,100%,70%)] ml-4">worker</span>
                    </h1>
                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
                        <Link
                            className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
                            href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers"
                            target="_blank"
                        >
                            <h3 className="text-2xl font-bold">Using Web Workers</h3>
                            <div className="text-lg">
                                Web Workers are a simple means for web content to run scripts in background threads.
                                <br/>
                                <br/>
                                <code>const worker = new Worker(&quot;worker.js&quot;);</code>
                            </div>
                        </Link>
                        <Link
                            className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
                            href="https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers#%E5%85%B1%E4%BA%AB_worker"
                            target="_blank"
                        >
                            <h3 className="text-2xl font-bold">SharedWorker</h3>
                            <div className="text-lg">
                                <code>const sharedWorker = new SharedWorker(&quot;worker.js&quot;);</code>
                            </div>
                        </Link>
                    </div>
                </div>

                <div className="container flex flex-col justify-center items-center gap-x-20 gap-y-4 px-4 py-16">
                    <div className="flex flex-row gap-x-4 text-cyan-50 my-2 text-left">
                        <button onClick={testWorker1} className="border-2 p-2 border-amber-100">test worker1</button>
                        {worker1 && <p className="my-2">输出：{worker1}</p>}
                    </div>

                    {/*<div className="flex flex-row gap-x-4 text-cyan-50 my-2 text-left">*/}
                    {/*    <button onClick={testWorkerts1} className="border-2 p-2 border-amber-100">test worker1 ts</button>*/}
                    {/*    {worker1 && <p className="my-2">输出：{worker1}</p>}*/}
                    {/*</div>*/}


                    <div className="flex flex-row gap-x-4 text-cyan-50">
                        <button onClick={testWorker2} className="border-2 p-2 border-blue-400">test worker2</button>
                        {worker2 && <p className="my-2">输出：{worker2}</p>}
                    </div>

                    <div className="flex flex-row gap-x-4 text-cyan-50">
                        <button onClick={testSharedWorker} className="border-2 p-2 border-blue-400">test SharedWorker
                        </button>
                        {sharedWorker && <p className="my-2">输出：{sharedWorker}</p>}
                    </div>

                    <div className="flex flex-row gap-x-4 text-cyan-50">
                        <button onClick={testNoWorkerMulti} className="border-2 p-2 border-blue-400">calc 1 * 2 *
                            ... {number} (no worker)
                        </button>
                        {noWorkerMulti && <p className="my-2">输出：{noWorkerMulti}</p>}
                    </div>


                    <div className="flex flex-row gap-x-4 text-cyan-50">
                        <button onClick={tesWorkerMulti} className="border-2 p-2 border-blue-400">calc 1 * 2 *
                            ...{number} (with worker)
                        </button>
                        {workerMulti && <p className="my-2">输出：{workerMulti}</p>}
                    </div>
                </div>
            </main>
        </>
    );
};

export default Worker;
